Design Basics

The Viewer interface was designed to adapt to any size viewport. Rather than targeting specific devices, the Viewer will fit to the maximum screen size on any device whether it is a desktop, tablet, or phone:

Media Queries

The viewer utilizes CSS3 Media Queries (http://www.w3.org/TR/css3-mediaqueries/) with expressions using min-width and max-width to adjust the layout of navigation and dialogs.

Breakpoints

The Media Query Breakpoints, defined in viewer.css, are set according to the Viewer layout. On smaller viewports the tab navigation collapses into a menu and some tools are hidden. On larger viewports the dialogs transform from horizontal to a vertical layout to utilize screen real estate. The breakpoints are as follows:

Example	Copy Code
/* Target modern browsers that support media queries / @media (min-width: 0) {} / Mobile & Tablet Sizes, collapse navigation tabs into menu / @media (max-width: 767px) {} / Desktop Sizes */ @media (min-width: 768px) {}

Example

Copy Code

/* Target modern browsers that support media queries */
@media (min-width: 0) {}
/* Mobile & Tablet Sizes, collapse navigation tabs into menu */
@media (max-width: 767px) {}
/* Desktop Sizes */
@media (min-width: 768px) {}

Media Queries are not supported in Internet Explorer 8 and no Media Query polyfills are used in this regard. All Internet Explorer 8 specific styles are in legacy.css.

Polyfills

There are a few polyfills used to provide support for modern browser features:

Selectivzr (http://selectivizr.com/) - Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
HTML5 Shiv (https://github.com/aFarkas/html5shiv) - The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
Normalize (http://necolas.github.io/normalize.css/) - Normalize provides better cross-browser consistency in the default styling of HTML elements.

Components

The viewer is made up of a number of UI components:

Tab Navigation - The set of tabs that distinguishes different aspects of viewer functionality.
Tab Pane - The tools specific to each tabset. This can be configured to display horizontally or vertically.
Status Bar - Displays the page number and allows you to jump to a specific page.
Dialog - Menu area for extended options and settings.
Context Menu - Menu that allows you to change properties of annotations.
Page List - The viewer control that renders the document.

The styles for these components are in viewer.css with exception to Page List, those styles are defined in viewercontrol.css.

Templates

You can change the markup of the Viewer UI components by editing the templates. The templates are HTML files ending in *.Template.html. The templates are consumed using the Underscore.js Template utility function. Variables and JavaScript conditions can be used within the templates using ERB syntax. For more information see the Underscore documentation at http://underscorejs.org/#template.

These are the current templates that are being used:

File Name	Contents
contextMenuTemplate.html	Context Menu
overwriteOverlayTemplate.html	Annotation Save Overwrite prompt
printOverlayTemplate.html	Print Options Modal
printTemplate.html	Print Template
unsavedChangesOverlayTemplate.html	Annotations Save prompt
viewerTemplate.html	Viewer navigation and layout

Disabling Tabs

To disable one of the navigation tabs you could comment out the HTML in the templates or pass one of the following configuration parameters to the jQuery viewer plugin:

Example	Copy Code
var pluginOptions = { uiElements: { redactTab: false } };